<template>
	<div class="loading-mask" v-show="loading">
		<div class="box" :class="icon ? '' : 'noIcon'">
			<span class="loading-icon" v-if="icon"
				><img src="../img/loading.gif" alt=""
			/></span>
			<span class="loading-message">{{ message }}</span>
		</div>
	</div>
</template>

<script>
export default {
	name: "Loading",
	props: {
		loading: {
			type: Boolean,
			default: false,
		},
		message: {
			type: String,
			default: "Loading...",
		},
		icon: {
			type: Boolean,
			default: false,
		},
	},
};
</script>

<style scoped>
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.5); */
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.box {
	padding: 50px;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.5);
}
.noIcon {
	padding: 10px;
}
.loading-icon {
	font-size: 50px;
	color: #fff;
}
.loading-message {
	margin-top: 20px;
	font-size: 16px;
	color: #fff;
}
</style>
